<template>
  <view class="news-page">
    <!-- 1. 新增：顶部天气+搜索区 -->
    <view class="top-bar">
      <!-- 天气组件（显示本地天气、PM2.5，模拟数据，真实项目可对接天气接口） -->
      <view class="weather">
        <text class="weather-icon">🌧️</text>
        <text class="weather-info">4°C 小雨 桂林</text>
        <text class="pm25">PM2.5:9</text>
      </view>
      <!-- 搜索框（支持关键词过滤新闻） -->
      <view class="search-box">
        <uni-icons type="search" size="24" color="#999" class="search-icon"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索关键词" 
          placeholder-class="placeholder"
          v-model="searchKeyword"
          @input="filterNews"
        />
      </view>
    </view>

    <!-- 2. 新增：数据更新提醒（下拉刷新后显示，3秒自动消失） -->
    <view class="update-tip" v-if="showUpdateTip">为您更新了15条内容</view>

    <!-- 3. 原有页面标题与新闻列表 -->
    <view class="page-title">最新资讯</view>
    <view class="news-container">
      <top-news-card 
        v-for="(item, index) in filteredNewsList" 
        :key="index" 
        :news="item" 
        @click="goToDetail(item)"
      ></top-news-card>
    </view>
  </view>
</template>
<script>
import TopNewsCard from "@/components/TopNewsCard/TopNewsCard.vue";
// 新增：导入广告JSON数据（需提前创建，路径可自定义）
import adData from "@/data/ad.json";

export default {
  components: {
    TopNewsCard
  },
  data() {
    return {
      newsList: [
        {
          title: "党的二十届四中全会公报学习手账：为基本实现社会主义现代化而共同奋斗",
          isTop: true,
          author: "人民日报",
          comments: 3162,
          time: "2025.10.25",
          id: 1, // 新增：新闻ID（用于详情页跳转）
          coverImg: "static/images/news1.jpg" // 新增：新闻封面图（组件需适配）
        },
        {
          title: "乘势而上，续写中国奇迹新篇章——党的二十届四中全会侧记",
          isTop: true,
          author: "新华社",
          comments: 56,
          time: "2025.10.25",
          id: 2,
          coverImg: "static/images/news2.jpg"
        },
        {
          title: "我国科技创新领域再获重大突破，多项技术达到国际领先水平",
          isTop: false,
          author: "科技日报",
          comments: 1205,
          time: "2025.10.24",
          id: 3,
          coverImg: "static/images/news3.jpg"
        },
        {
          title: "全球经济论坛在沪召开，多国代表共商合作新机遇",
          isTop: false,
          author: "经济日报",
          comments: 890,
          time: "2025.10.23",
          id: 4,
          coverImg: "static/images/news4.jpg"
        }
      ],
      searchKeyword: "", // 新增：搜索关键词
      showUpdateTip: false, // 新增：更新提醒显示状态
      filteredNewsList: [] // 新增：过滤后的新闻列表（用于搜索和广告插入）
    };
  },
  onLoad() {
    // 页面加载时：初始化新闻列表+插入广告
    this.initNewsList();
  },
  onPullDownRefresh() {
    // 新增：下拉刷新功能（文档3.1 功能需求6）
    setTimeout(() => {
      // 1. 模拟更新数据（实际项目替换为接口请求）
      const newNews = {
        title: "乡村振兴新举措：全国多地启动特色产业扶持计划",
        isTop: false,
        author: "农民日报",
        comments: 452,
        time: "2025.10.26",
        id: 5,
        coverImg: "static/images/news5.jpg"
      };
      this.newsList.unshift(newNews); // 新增新闻添加到列表顶部

      // 2. 显示更新提醒，3秒后隐藏
      this.showUpdateTip = true;
      setTimeout(() => {
        this.showUpdateTip = false;
      }, 3000);

      // 3. 重新初始化列表（含新数据和广告）
      this.initNewsList();

      // 4. 关闭下拉刷新动画
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    // 新增1：初始化新闻列表（插入广告）
    initNewsList() {
      // 复制原始新闻列表（避免修改原数据）
      this.filteredNewsList = [...this.newsList];
      // 动态插入广告（随机插入到第2-4条新闻之间，刷新后位置可变）
      const adIndex = Math.floor(Math.random() * 3) + 1; // 随机索引1-3
      this.filteredNewsList.splice(adIndex, 0, adData.adList[0]);
    },

    // 新增2：搜索过滤新闻（文档3.1 功能需求3）
    filterNews() {
      if (!this.searchKeyword.trim()) {
        // 无关键词：显示原始列表（含广告）
        this.initNewsList();
      } else {
        // 有关键词：过滤标题含关键词的新闻（广告不过滤，始终显示）
        const filtered = this.newsList.filter(news => 
          news.title.includes(this.searchKeyword.trim())
        );
        // 重新插入广告（保持广告位置动态）
        const adIndex = Math.floor(Math.random() * 3) + 1;
        filtered.splice(adIndex, 0, adData.adList[0]);
        this.filteredNewsList = filtered;
      }
    },

    // 新增3：跳转到新闻详情页（传递新闻ID）
    goToDetail(news) {
      // 广告不跳转详情页
      if (news.isAd) return;
      uni.navigateTo({
        url: `/pages/news/detail?id=${news.id}` // 详情页路径，需提前创建
      });
    }
  }
};
</script>
<style scoped>
.news-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 新增：顶部天气+搜索区样式 */
.top-bar {
  background-color: #fff;
  padding: 15rpx;
}
.weather {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
}
.weather-icon {
  font-size: 30rpx;
}
.pm25 {
  margin-left: 15rpx;
  color: #007AFF;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 60rpx;
  padding: 15rpx 20rpx;
}
.search-icon {
  margin-right: 15rpx;
}
.search-box input {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  background: transparent;
}
.placeholder {
  color: #999;
}

/* 新增：数据更新提醒样式 */
.update-tip {
  background-color: #fff8e6;
  color: #ff9800;
  font-size: 24rpx;
  text-align: center;
  padding: 10rpx;
  border-bottom: 1rpx solid #ffe0b2;
}

/* 原有样式保留 */
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx 15rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
.news-container {
  margin-top: 10rpx;
}
</style>
